<template>
    <div class="p-6">
      <!-- 下拉列表 -->
      <div class="flex justify-between items-center mb-4">
        <el-select v-model="selectedProvince" placeholder="选择省份" class="w-1/3">
          <el-option v-for="province in provinces" :key="province" :label="province" :value="province"></el-option>
        </el-select>
  
        <el-select v-model="selectedYear" placeholder="选择年份" class="w-1/3">
          <el-option v-for="year in years" :key="year" :label="year" :value="year"></el-option>
        </el-select>
      </div>
  
      <!-- 表格 -->
      <el-table  :data="pagedData" stripe style="width: 100%" >
        <el-table-column prop="major" label="专业名称" width="180"></el-table-column>
        <el-table-column prop="scoreRank" label="最低分/最低位次"></el-table-column>
      </el-table>
  
      <!-- 分页 -->
      <div class="mt-4 flex justify-center">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="filteredData.length"
          :page-size="pageSize"
          @current-change="handlePageChange"
        />
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref, computed } from 'vue';
  
  // 数据
  const provinces = ref([
    "北京", "天津", "上海", "重庆", "河北", "山西", "辽宁", "吉林", "黑龙江", "江苏", "浙江", "安徽", "福建", "江西", "山东", "河南", "湖北", "湖南", "广东", "海南", "四川", "贵州", "云南", "陕西", "甘肃", "青海", "台湾", "内蒙古", "广西", "西藏", "宁夏", "新疆", "香港", "澳门", "海外"
  ]);
  
  const years = ref(["2020", "2021", "2022", "2023", "2024"]);
  const selectedProvince = ref("");
  const selectedYear = ref("");
  
  // 模拟数据
  const tableData = ref([
    { major: "计算机科学与技术", scoreRank: "650/2000" },
    { major: "软件工程", scoreRank: "640/2500" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    { major: "经济学", scoreRank: "630/3000" },
    // 其他数据
  ]);
  
  const currentPage = ref(1);
  const pageSize = ref(15);
  
  // 过滤数据
  const filteredData = computed(() => {
    return tableData.value; // 在这里可以根据选择的省份和年份进行过滤
  });
  
  // 分页数据
  const pagedData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;
    return filteredData.value.slice(start, end);
  });
  
  // 处理分页更改
  function handlePageChange(page) {
    currentPage.value = page;
  }
  </script>
  
  <style scoped>
  /* 添加样式可以更改下拉框和表格的样式 */
  </style>
  